<template>
    <div class="app-container">
        <levelbar></levelbar>
        <div class="main">
            <section>
                <div class="form-title">服务开通说明</div>
                <aside>开通服务流程图</aside>
                <blockquote>
                    <span class="bor padTent">开通或修改服务</span>
                    <img src="../../../images/serviceManage/point.png" alt="">
                    <span>线下沟通</span>
                    <img src="../../../images/serviceManage/point.png" alt="">
                    <span class="bor">与公司运营专员联系，沟通确定好开通服务名称，收费金额，收费方式，收费开始时间</span>
                    <img src="../../../images/serviceManage/point.png" alt="">
                    <span>电脑填写申请资料</span>
                    <img src="../../../images/serviceManage/point.png" alt="">
                    <span class="bor">电脑端点击当前页申请开通或者修改开始选择设置内容，请确保选择内容与线下沟通一致</span>
                    <img src="../../../images/serviceManage/point.png" alt="">
                    <span>提交申请</span>
                    <img src="../../../images/serviceManage/point.png" alt="">
                    <span class="bor padTent">审核通过</span>
                </blockquote>
            </section>
            <section>
                <aside>开通服务文字说明</aside>
                <ol>
                    <li>开通服务前请先线下与公司运营专员电话沟通，沟通确认好开通服务的收费金额，收费开始时间及分成比例等内容。运营专员联系电话：<mark>0512-8880258</mark></li>
                    <li>线下沟通确认后，运营专员会填写“服务开通沟通确认单”提交至服务开通专员</li>
                    <li>电脑端线上填写申请资料后确认提交至公司后台，申请资料请确保与运营专员沟通内容保持一致</li>
                    <li>服务开通人员在接到“沟通确认单”及“开通申请资料”后进行审核</li>
                    <li>“沟通确认单”与“开通申请资料”保持一致，审核方可通过</li>
                </ol>
            </section>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">返回</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import Levelbar from '../../layout/Levelbar';
export default {
    components: { Levelbar },
    data() {
        return {};
    },
    methods: {
        // 取消
        cancel() {
            this.$router.go(-1)
        }
    }
};
</script>
<style lang="scss" scoped>
.app-container {
  position: relative;
  padding: 20px 20px 10px;
  .app-levelbar {
    height: 35px;
  }
  .el-form {
    background: #fff;
    padding-bottom: 50px;
  }
}
.main {
    padding:0 50px;
    background: #fff;
    box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    .form-title {
        padding-top:8px;
        text-align: center;
        font-size: 18px;
        color: #333;
        line-height: 72px;
        font-weight: bold;
        font-family: Microsoft YaHei;
        border-bottom: 1px solid #ddd;
    }
    .dialog-footer {
      text-align: center;
      padding: 20px 0;
    }
}
aside {
  position: relative;
  padding: 36px 0 0 20px;
  font-size: 14px;
  color: #333;
  margin-bottom: 20px;
  &::before {
    height: 14px;
    width: 4px;
    background: #ff5e2c;
    content: "";
    position: absolute;
    left: 0;
    bottom: 4px;
  }
}
blockquote {
  padding: 0 22px 80px;
  display: -webkit-flex; /* Safari */
  display: flex;
  justify-content: space-around;
  align-items: center;
  span {
    font-size: 14px;
    color: #333;
    display: inline-block;
    padding: 16px;
    &.bor {
      width: 200px;
      border: 1px solid #ccc;
    }
    &.padTent {
      text-align: center;
      padding: 30px 0;
    }
  }
}
ol {
  padding: 0 0 100px 35px;
  li {
    font-size: 14px;
    color: #666;
    line-height: 40px;
  }
}
mark {
  background: transparent;
  color: #ff5e2c;
}
</style>
